<!doctype html>
<!--
    Please note: This page is similar to the one at mobile.element.io so any changes made here can potentially
    be applied to that site as well. They still share the mobile-apps.ts file for updating the app metadata.
-->
<html lang="en">
    <head>
        <title>Element Mobile Guide</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta name="apple-itunes-app" content="app-id=id1631335820" />
    </head>

    <body>
        <div class="mx_HomePage_errorContainer">
            <!-- populated by JS if needed -->
        </div>

        <div class="mx_HomePage_container">
            <header>
                <div class="mx_HomePage_header">
                    <div>
                        <img src="./assets/element-logo.svg" alt="Element Logo" width="148px" height="32px" />
                    </div>
                    <div>
                        <p id="header_title">Join Element.</p>
                    </div>
                </div>
                <hr />
            </header>

            <main>
                <div class="mx_HomePage_col mx_Spacer">
                    <p>
                        The <a id="back_to_element_button" href="#" class="mx_DesktopLink">desktop site</a> does
                        <b>not</b> work on mobile, please download the app.
                    </p>
                </div>
                <div class="mx_HomePage_col mx_Spacer">
                    <div class="mx_HomePage_row">
                        <div class="mx_HomePage_step_number">
                            <span>1</span>
                        </div>
                        <div>
                            <h1 id="step1_heading">Download Element</h1>
                            <div class="mx_StoreLinks">
                                <a
                                    href="https://apps.apple.com/app/element-x-secure-chat-call/id1631335820"
                                    target="_blank"
                                    class="mx_StoreBadge"
                                    id="app_store_link"
                                >
                                    <img
                                        src="./assets/app-store-badge.svg"
                                        alt="Download on the App Store."
                                        width="120px"
                                        height="40px"
                                    />
                                </a>
                                <a
                                    href="https://play.google.com/store/apps/details?id=io.element.android.x"
                                    target="_blank"
                                    class="mx_StoreBadge"
                                    id="play_store_link"
                                >
                                    <img
                                        src="./assets/google-play-badge.svg"
                                        alt="Get it on Google Play."
                                        width="135px"
                                        height="40px"
                                    />
                                </a>
                            </div>
                            <p id="f_droid_section">
                                Also available on
                                <a
                                    href="https://f-droid.org/packages/io.element.android.x"
                                    target="_blank"
                                    class="mx_ClearDecoration"
                                    id="f_droid_link"
                                    >F-Droid</a
                                >
                            </p>
                        </div>
                    </div>
                </div>
                <div id="step2_container" class="mx_HomePage_col mx_Spacer" style="display: none">
                    <div class="mx_HomePage_row">
                        <div class="mx_HomePage_step_number">
                            <span>2</span>
                        </div>
                        <div>
                            <h1>Come back here to sign in</h1>
                            <p id="step2_description">This will set up your app</p>
                            <a class="mx_Button" id="deep_link_button" href="#">Sign in</a>
                        </div>
                    </div>
                </div>
            </main>
        </div>

        <footer>
            <div class="mx_BottomGradient"></div>
        </footer>
    </body>
</html>
